<template>
  <div class="app-container">
    <xm-table ref="xmtable" :url='url'>
      <template v-slot:actions>
        <el-button class="filter-item" type="primary" @click.native="handleAdd">添加</el-button>
        <!-- <router-link class="el-button el-button--primary" :to="{path:'/project/addProject',params:{}}">添加</router-link> -->
      </template>

      <template v-slot:search>
        <el-input v-model="where.order_number" placeholder="输入名称搜索" style="width: 200px;" class="filter-item" @keypress.enter.native="table.where(where)" />
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click.native="table.where(where)" >搜索</el-button>
      </template>

      <!--表格主内容-->
      <template v-slot:table="slotProps">
        <el-table
            :key="slotProps.tableKey"
            v-loading="slotProps.listLoading"
            :data="slotProps.list"
            border
            highlight-current-row
            style="width: 100%;"
        >
          <el-table-column label="订单号">
            <template slot-scope="scope">
              {{ scope.row.order_number}}
            </template>
          </el-table-column>

          <el-table-column label="金额" width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.money }}</span>
            </template>
          </el-table-column>

          <el-table-column label="创建时间">
            <template slot-scope="scope">
              <span>{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <el-button type="primary" size="mini" @click="handleEdit(row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </xm-table>

    <!--新增/编辑弹窗-->
    <el-dialog :visible.sync="isAddModalShow">
      <el-form ref="dataForm"
          :rules="rules"
          :model="sizeForm"
          label-position="left"
          label-width="100px"
      >
        <el-form-item label="订单号" prop="order_number">
          <el-input v-model="sizeForm.order_number" />
        </el-form-item>

        <el-form-item label="红包金额" prop="money" v-if="!nowId">
          <el-input v-model="sizeForm.money" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="isAddModalShow = false">取消</el-button>
        <el-button type="primary" @click="createdData(nowId)">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import xmTable from "@/components/xmTable"
//import { constants } from 'fs';

export default {
  name: 'projectList',
  components: {
    xmTable,
  },
  data() {
    return {
      url: api.prepareForm,     //请求地址
      table: {},            //获取table内部方法
      where: {              //搜索用关键字
        order_number: ''
      },
      nowId: 0,              //当前id
	  isAddModalShow: false, //弹窗控制

      sizeForm: {
        order_number: '',
        money: 0
      },
      //校验规则
      rules: {
        order_number: [{ required: true, message: '请输入订单号' }],
        money: [{ required: true, message: '请输入红包金额' }]
      }
    }
  },
  created() {

  },
  mounted() {
    const vm = this;
    vm.table = vm.$refs.xmtable
  },
  computed: {

  },
  methods: {
    // 获取数据接口
    async getprojectItem(id) {
      id = id || '0'
      const vm = this
      let url = api.prepareForm + '/' + id + '/edit'
      return vm.$axios.get(url)
        .then((res) => {
          vm.sizeForm.order_number = res.order_number
          vm.sizeForm.money = res.money
        })
    },
    // 提交/修改 数据接口
    createdData() {
      const vm = this
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const postData = JSON.parse(JSON.stringify(vm.sizeForm))    //静态data
          const id = vm.nowId                 //判断是否编辑
          let method = 'post'
          let url = api.prepareForm
          if (id) {
            url = url + '/' + id
            method = 'put'
          }
          vm.$axios[method](url, postData)
            .then((res) => {
              vm.table.reset()
              vm.table.getList()
              // vm.isAddModalShow = false
              vm.$message({
                message: '成功',
                type: 'success'
              })
              vm.resetForm();
          })
        }
      })
    },
    //添加
    handleAdd() {
      const vm = this
      vm.nowId = ''
      vm.resetForm()
      vm.isAddModalShow = true
    },
    //编辑
    async handleEdit(row) {
      const vm = this
      let id = row.prepare_form_id
      vm.nowId = id
      vm.resetForm()
      await vm.getprojectItem(id)
      vm.isAddModalShow = true
    },

    resetForm() {
      const vm = this
      vm.sizeForm = {
          order_number: '',
          money: 0
      }
    }
  }
}
</script>

<style scoped>
  .btnLink {
    display: block;
    width:100%;
  }
</style>
